<template>
	<view class="content">
		<!-- 用户信息区域 -->
		<view class="user-info-box">
			<view class="avatar-wrapper">
				<image :src="getUserAvatar()" mode="aspectFill" class="avatar"></image>
			</view>
			<view class="info">
				<view class="nickname">{{ userInfo.nickname || userInfo.username || '未设置昵称' }}</view>
				<view class="role-tag" v-if="isAdmin">管理员</view>
				<view class="role-tag" v-else>普通用户</view>
			</view>
		</view>
		
		<!-- 管理员功能区 -->
		<view class="admin-area" v-if="isAdmin">
			<u-cell-group title="管理功能">
				<u-cell icon="plus-circle" title="添加楼层" is-link @click="navTo('/pages/add-floor/add-floor')"></u-cell>
				<u-cell icon="home" title="添加房间" is-link @click="navTo('/pages/add-room/add-room')"></u-cell>
			</u-cell-group>
		</view>
		
		<!-- 普通用户功能区 -->
		<view class="user-area">
			<u-cell-group title="个人设置">
				<u-cell icon="edit-pen" title="修改昵称" is-link @click="showNicknameDialog = true"></u-cell>
				<u-cell icon="info-circle" title="关于我们" is-link @click="navTo('/pages/about/about')"></u-cell>
				<u-cell icon="logout" title="退出登录" @click="handleLogout"></u-cell>
			</u-cell-group>
		</view>
		
		<!-- 修改昵称弹窗 -->
		<u-modal
			:show="showNicknameDialog"
			title="修改昵称"
			:show-cancel-button="true"
			@confirm="updateNickname"
			@cancel="showNicknameDialog = false"
		>
			<view class="nickname-input">
				<uni-forms :model="{ nickname: newNickname }" ref="nicknameForm" validate-trigger="submit">
					<uni-forms-item name="nickname">
						<uni-easyinput v-model="newNickname" placeholder="请输入新昵称"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { store as userStore, mutations } from '../../uni_modules/uni-id-pages/common/store.js';
	import { isPermission } from '../../utils/common.js';
	
	// 数据
	const userInfo = ref({});
	const showNicknameDialog = ref(false);
	const newNickname = ref('');
	const nicknameForm = ref(null);
	const token = ref('');
	
	// 计算属性
	const isAdmin = isPermission()
	
	// 生命周期
	onMounted(() => {
		loadUserInfo();
		getToken();
	});
	
	// 获取token
	const getToken = () => {
		token.value = uni.getStorageSync('uni_id_token') || '';
	};
	
	// 加载用户信息
	const loadUserInfo = async () => {
		try {
			// 从store获取用户信息
			userInfo.value = userStore.userInfo || {};
			// 如果store中没有完整信息，则更新一次
			if (!userInfo.value.nickname && !userInfo.value.username) {
				await mutations.updateUserInfo();
				userInfo.value = userStore.userInfo || {};
			}
		} catch (e) {
			console.error('获取用户信息失败', e);
		}
	};
	
	// 跳转页面
	const navTo = (url) => {
		uni.navigateTo({
			url
		});
	};
	
	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					mutations.logout();
				}
			}
		});
	};
	
	// 更新昵称
	const updateNickname = async () => {
		if (!newNickname.value.trim()) {
			uni.showToast({
				title: '昵称不能为空',
				icon: 'none'
			});
			return;
		}
		
		uni.showLoading({
			title: '更新中'
		});
		
		try {
			// 确保token是最新的
			getToken();
			
			await mutations.updateUserInfo({
				nickname: newNickname.value.trim()
			});
			
			// 重新加载用户信息
			loadUserInfo();
			
			showNicknameDialog.value = false;
			newNickname.value = '';
		} catch (e) {
			console.error('更新昵称失败', e);
			uni.showToast({
				title: e.message || '更新昵称失败',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};
	
	// 获取用户头像
	const getUserAvatar = () => {
		if (userInfo.value.avatar_file) {
			if (typeof userInfo.value.avatar_file === 'object' && userInfo.value.avatar_file.url) {
				return userInfo.value.avatar_file.url;
			} else if (typeof userInfo.value.avatar_file === 'string') {
				return userInfo.value.avatar_file;
			}
		}
		
		if (userInfo.value.avatar) {
			return userInfo.value.avatar;
		}
		
		return '/static/default-avatar.png';
	};
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 16px;
	}
	
	.user-info-box {
		display: flex;
		align-items: center;
		padding: 20px;
		background: linear-gradient(135deg, #2563eb, #3b82f6);
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
		margin-bottom: 16px;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%,
				transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%,
				transparent 75%, transparent);
			background-size: 4px 4px;
			opacity: 0.1;
		}
		
		.avatar-wrapper {
			width: 64px;
			height: 64px;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 16px;
			border: 2px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			
			.avatar {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
		.info {
			flex: 1;
			
			.nickname {
				font-size: 18px;
				font-weight: 600;
				color: #ffffff;
				margin-bottom: 6px;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			}
			
			.role-tag {
				display: inline-block;
				background-color: rgba(255, 255, 255, 0.2);
				color: #ffffff;
				padding: 2px 8px;
				border-radius: 6px;
				font-size: 12px;
				backdrop-filter: blur(4px);
			}
		}
	}
	
	.admin-area, .user-area {
		margin-bottom: 16px;
		background: #ffffff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		
		:deep(.u-cell-group__title) {
			padding: 16px 16px 8px;
			font-size: 15px;
			font-weight: 600;
			color: #1e293b;
		}
		
		:deep(.u-cell) {
			padding: 16px !important;
		}
		
		:deep(.u-cell__title) {
			color: #334155 !important;
			font-size: 14px !important;
		}
		
		:deep(.u-cell__icon) {
			color: #64748b !important;
			font-size: 18px !important;
		}
		
		:deep(.u-cell__right-icon) {
			color: #94a3b8 !important;
		}
		
		:deep(.u-cell:active) {
			background-color: #f8fafc;
		}
	}
	
	.nickname-input {
		padding: 20px 15px;
		
		:deep(.uni-forms-item) {
			margin-bottom: 0;
		}
		
		:deep(.uni-easyinput) {
			background-color: #f8fafc;
			border-radius: 8px;
		}
		
		:deep(.uni-easyinput__content) {
			min-height: 40px;
		}
	}
	
	:deep(.u-modal) {
		border-radius: 12px;
		overflow: hidden;
	}
	
	:deep(.u-modal__title) {
		font-size: 16px;
		font-weight: 600;
		color: #1e293b;
	}
	
	:deep(.u-modal__button) {
		font-size: 14px;
		font-weight: 500;
	}
	
	:deep(.u-modal__button--confirm) {
		color: #2563eb;
	}
</style>